<template>
  <page-wrap>
    <div class="open-container">
      <div class="container-top">
        <div class="container-top-title">会员卡类型：</div>
        <div class="container-top-value active" v-if="isUseBrand">品牌卡</div>
        <div class="container-top-value active" :class="{'active':storeCard}">门店卡</div>
      </div>
      <van-form input-align="right" class="container-main-form">
        <van-cell-group inset :border="false">
          <van-field
            v-model="username"
            name="姓名"
            label="姓名"
            placeholder="请输入会员姓名"
            autocomplete="off"
          />

          <van-field
            v-model="phone"
            name="手机号"
            label="手机号"
            placeholder="请输入手机号码"
            type="number"
            autocomplete="off"
          />
          <van-field name="radio" label="性别">
            <template #input>
              <van-radio-group
                v-model="gender"
                direction="horizontal"
                style="display: flex"
                shape="dot"
              >
                <van-radio name="先生" style="margin-right: 16px"
                  >先生</van-radio
                >
                <van-radio name="女士">女士</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field
            v-model="birthday"
            is-link
            readonly
            name="ask"
            label="生日"
            placeholder="请选择"
            @click="showBirthday = true"
          />
        </van-cell-group>
      </van-form>
      <z-button bold @click="onSubmit" top="20" v-has-role="'waiter-member-open'"
        >创建</z-button
      >
    </div>
  </page-wrap>
  <z-popup
    :show="showBirthday"
    position="bottom"
    close-on-click-overlay
    style="border-radius: 24px 24px 0px 0px"
    class="popup"
    @close="confirmOn"
  >
    <van-date-picker
      v-model="currentDate"
      :columns-type="columnsType"
      @cancel="onCancel"
      @confirm="onConfirm"
      title="生日"
    />
    
  </z-popup>

</template>

<script setup>
import dayjs from 'dayjs'
import Api from '@/api'
import { showToast } from 'vant';
import { onMounted } from 'vue';
import ls from '@/lib/ls'
import useCartStore from '@/store/cart'
import { validateMobile } from '@/lib/util.js'
const cartStore = useCartStore()
const route = useRoute()
const router = useRouter()
const username = ref('')
const phone = ref('')
const gender = ref('女士')
let genderCode = ref()
// 生日
const birthday = ref('')
const showBirthday = ref(false)
const currentDate = ref(['01', '01'])
const columnsType = ['month', 'day']
console.log(route.query);

onMounted(()=>{
  if(route.query.redirect == '/open/orderCashier'){
    phone.value = cartStore.account
  }
  if(route.query.redirect == '/save'){
    phone.value = route.query.mobile
  }
})
//------------------------------------------------------生日弹窗按钮------------------------------------------------------------
const onConfirm = () => {
  console.log(currentDate.value,'currentDate.value')
  let date = currentDate.value[0] + '-' + currentDate.value[1]
  console.log(date,'sad')
  // birthday.value = dayjs(date).format('MM-DD')
  birthday.value = date
  console.log(birthday.value,birthday.value)
  
  showBirthday.value = false
}


const onCancel = () => {
  showBirthday.value = false
}
const confirmOn = ()=>{
  showBirthday.value = false
}

//------------------------------------------------------创建--------------------------------------------------------------------
 function validateName(name) {
     // 长度限制：最大长度为12个字符
  if (name.length > 12) {
    showToast('姓名长度不能超过12个字符')
    return false;
  }
  if(!name){
    showToast('姓名不能为空')
    return false;
  }
  // 空格限制：不允许包含空格
  if (/\s/.test(name)) {
    showToast('姓名不能包含空格')
    return false;
  }
  return true
}
const storeCard = ref(false)

const subflag = ref(false)
const onSubmit = e => {
  if (gender.value === '女士') {
    genderCode.value = '011002'
  } else {
    genderCode.value = '011001'
  }
  if (!validateMobile(phone.value)) return
  if (!validateName(username.value)) return
  if(subflag.value) {
      return
  }
  subflag.value = true
  let cardType = '1,2'
  // if(isUseBrand.value){
  //   cardType = '1'
  // }else{
  //   cardType = ''
  // }
 
  // if(storeCard.value){
  //   if(cardType == '1'){
  //     cardType = '1,2'
  //   }else{
  //     cardType = '2'
  //   }
    
  // }
  // if(cardType == ''){
  //   showToast('请选择会员卡类型')
  //   return
  // }
  const openCard = Api.Common.AppObjProcess.Do({"functionName": "MemberOpenCrad","contentData": {
    "orgCode": '00004',
    "orgName": '',
    "mobiles": phone.value,
    "openId": '',
    "wechat": '',
    "name": username.value,
    "sex": genderCode.value,
    "birthday": birthday.value,
    "cardType":cardType
  }})
    .then(res => {
      showToast('开卡成功')
      subflag.value = false
      if(route.query.redirect){
        router.back()
        ls.set('MEMBER_CARD_NUMBER', phone.value)
        return
      }
      router.push({
        path: `/onmember`,
        
      })
    }).catch(err=>{
        subflag.value = false
    })
}
const isUseBrand = ref(true)
// const GetBaseInfo = ()=>{
//   Api.Common.AppObjProcess.Do({
//       functionName: 'GetBaseConfigInfo',
//       contentData: {orgCode:ls.get('ORG_CODE')}
//   })
//   .then(res=>{
//     console.log(res);
//     isUseBrand.value = res.isUseBrandCard
//   })
// }
// GetBaseInfo() // 获取门店配置信息
</script>

<style scoped lang="scss">
@import '@/styles/l.scss';
.open-container{
  padding: 10px 12px 0 12px;
  .container-top{
    display: flex;
    align-items: center;
    padding: 10px 0 20px;
    .container-top-title{
      font-family: PingFang SC;
      font-weight: bold;
      font-size: 18px;
      color: #FFFFFF;
      line-height: 18px;
    }
    .container-top-value{
      width: 80px;
      height: 30px;
      background: #3D3D4C;
      border-radius: 5px;
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 16px;
      color: #FFFFFF;
      line-height: 30px;
      text-align: center;
      margin-right: 10px;
      &.active{
        background: #FFAA00;
      }
    }
  }
}

:deep(.van-picker__toolbar) {
  background-color: #45454d;
}
::v-deep(.van-picker__columns) {
  background-color: #45454d;
}
::v-deep(.van-picker-column) {
  background-color: #45454d;
}
:deep(.van-picker-column__item) {
        color: #FFFFFF;
    }
    :deep(.van-picker-column__item--selected) {
        color: #FFAA00;
    }
    :deep(.van-picker__mask) {
        background: transparent;
    }
    :deep(.van-hairline-unset--top-bottom) {

        &:after {
            border-color: #505059;
        }
    }
    :deep(.van-picker__confirm) {
        font-size: 16px;
        color: #FFAA00;
        padding: 0 30px;
    }
    :deep(.van-picker__cancel) {
        font-size: 16px;
        color: #999999;
        padding: 0 30px;
    }
    :deep(.van-picker__title) {
        font-size: 18px;
        color: #FFFFFF;
    }
    :deep(.van-picker) {
        background-color: transparent;
    }
    :deep(.van-tabs__nav) {
        background-color: transparent;
    }
    :deep(.van-tab) {
        color: #CCCCCC;
        &.van-tab--active {
            color: #FFAA00;
        }
    }
    :deep(.van-tabs__line) {
        background-color: #FFAA00;
    }
    :deep(.van-picker__toolbar) {
        border-bottom: 1px solid #505059;
    }
    :deep(.van-picker-group__tab-title) {
        margin-right: 0;
    }
</style>
